<script setup>
import { ref, reactive } from 'vue'
import config from '@/assets/js/config'
import { showMsg } from '@/assets/js/utils'
import { useUserStore } from '@/stores/index'

const newFormRef = ref({})
const newForm = reactive()
// eslint-disable-next-line no-unused-vars
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
    usersImportTitle: {
        type: String,
        default: '',
    },
    fileTitle: {
        type: String,
        default: '',
    },
    usersImportType: {
        type: String,
        default: '',
    },
})
const fileUrl = ref()
// props.usersImportType == 1
//     ? '/upload/upload_analysis'
//     : '/upload/upload_permit'
if (props.usersImportType == 1) {
    fileUrl.value = '/upload/upload_analysis'
} else if (props.usersImportType == 2) {
    fileUrl.value = '/upload/upload_permit'
} else {
    fileUrl.value = '/upload/upload_profile'
}
const uploadUrl = config.baseApi + fileUrl.value
const userStore = useUserStore()
const uploadHeaders = reactive({
    Authorization: 'Bearer ' + userStore.token,
})
const uploadFileList = ref([])
function onFileChange(uploadFile, uploadFiles) {
    uploadFileList.value = uploadFiles
}
function onFileRemove(uploadFile, uploadFiles) {
    uploadFileList.value = uploadFiles
}
function importSuccess(res) {
    if (res.code == 1) {
        showMsg(res.msg, 'error')
        return
    }
    showMsg(res.data || '上传成功')
    emits('update:visible', false)
}
// 导入失败
function importError(err, file, fileList) {
    console.log(err, file, fileList)
    showMsg(err.msg, 'error')
}
const upload = ref()
function submitAction() {
    if (uploadFileList.value.length == 0) {
        showMsg('请导入文件', 'error')
        return
    }
    upload.value.submit()
    // newFormRef.value.validate((valid, fields) => {
    //     if (valid) {
    //         console.log('成功')
    //     } else {
    //         console.log('error submit!', fields)
    //     }
    // })
}
const emits = defineEmits(['update:visible', 'success'])
function closeAction() {
    emits('update:visible', false)
}
const handleExceed = (files) => {
    upload.value.clearFiles()
    const file = files[0]
    upload.value.handleStart(file)
}
</script>

<template>
    <div>
        <el-dialog
            :model-value="visible"
            @close="closeAction"
            :title="usersImportTitle"
            width="400px"
        >
            <div
                v-if="props.usersImportType == 3"
                style="color: red"
                class="mb-10"
            >
                此步骤不可恢复，请谨慎上传配置文件！
            </div>
            <el-form ref="newFormRef" :model="newForm" :rules="formRules">
                <el-form-item :label="fileTitle" prop="uploadFileList">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :action="uploadUrl"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :show-file-list="true"
                        :on-success="importSuccess"
                        :on-error="importError"
                        :on-change="onFileChange"
                        :on-remove="onFileRemove"
                        :auto-upload="false"
                        :headers="uploadHeaders"
                        :file-list="uploadFileList"
                        :data="uploadFileList[0]"
                    >
                        <el-button type="primary">添加文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeAction">取消</el-button>
                    <el-button type="primary" @click="submitAction">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped></style>
